<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { eventCenter, getCurrentInstance } from '@tarojs/taro';
import { Right as AppNutIconRight } from '@nutui/icons-vue-taro';
const props = defineProps<{
  /**
   * 显示已经选过的值
   */
  selectedValue?: string;
  typeList: FlowpathWarehouse.WarehouseTypeListRespType[];
  placeholder: string;
}>();

const emits = defineEmits<{
  (e: 'onChange', id: string, typeName: string): void;
}>();
//局部
const state: {
  radioVal: string;
  radioPickerVisible: boolean;
} = reactive({
  radioVal: '',
  radioPickerVisible: false,
});

if (props.selectedValue) {
  state.radioVal = props.selectedValue;
}

function clickHandle() {
  state.radioPickerVisible = !state.radioPickerVisible;
}

function confirm({ selectedOptions }: any) {
  const text = selectedOptions[0].text;
  emits('onChange', selectedOptions[0].value, text);
  state.radioPickerVisible = false;
  state.radioVal = text;
}
onMounted(() => {
  eventCenter.on(getCurrentInstance().router?.onShow as string, () => {
    //清理数据，当成功页面返回的时候，显示初始状态
    state.radioVal = '';
    state.radioPickerVisible = false;
  });
});

defineExpose({ state });
</script>
<template>
  <view v-bind="$attrs" class="store-room-product-picker" @click="clickHandle">
    <text>{{ state.radioVal || props.placeholder }}</text>
    <app-nut-icon-right />
  </view>
  <nut-popup position="bottom" v-model:visible="state.radioPickerVisible">
    <nut-picker
      :columns="
        typeList.map((item) => {
          return {
            text: item.typeName,
            value: item.id,
          };
        })
      "
      :title="props.placeholder"
      @close="state.radioPickerVisible = false"
      @confirm="confirm"
      @cancel="state.radioPickerVisible = false"
    ></nut-picker>
  </nut-popup>
</template>
<style lang="scss">
.store-room-product-picker {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
